/*
  学习目标：挂载后开启定时器, 卸载时,清除定时器
  场景:
  1. 获取dom
  2. 获取组件实例
  3. 💥 可以保存任意不需要渲染的数据
 
*/

import React, { useRef } from 'react';
import { useEffect } from 'react';
import { useState } from 'react';

export default function App() {
  const [isShow, setIsShow] = useState(true);
  return <div>{isShow && <Child />}</div>;
}

function Child() {
  // 1.
  const timerIdRef = useRef();

  useEffect(() => {
    // 2. .current = xxx
    timerIdRef.current = window.setInterval(() => {
      console.log('定时器在跑  ----->  ', 123);
    }, 100);
  }, []);

  useEffect(() => {
    return () => {
      // 3. 通过.current
      clearInterval(timerIdRef.current);
    };
  }, []);

  return <div></div>;
}
